<template>
  <div class="userFeedback">
    <el-card>
      <div class="box">
        <el-select v-model="feedbackTypeVal" placeholder="请选择反馈类型">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>

        <el-select v-model="replyVal" placeholder="请选择回复类型">
          <el-option
            v-for="item in optionsB"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>

        <el-date-picker
          v-model="userVal"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          value-format="yyyy-MM-dd"
          @change="focus"
        >
        </el-date-picker>

        <el-button  class="btn" @click="feedbackListBtn"
          >查询搜索</el-button
        >
      </div>
      <el-table :data="tableData"  style="width: 100%">
        <el-table-column prop="feedbackDate" label="反馈日期">
        </el-table-column>
        <el-table-column prop="feedbackPerson" label="反馈人">
        </el-table-column>
        <el-table-column prop="id" label="ID"> </el-table-column>
        <el-table-column prop="feedbackType" label="反馈类型">
          <template slot-scope="scope">
            <span>{{
              scope.row.feedbackType == 1 ? "建议" : "举报"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="reasonsForFeedback" label="反馈原因">
        </el-table-column>
        <el-table-column label="操作">
          <!-- reply  1已回复 2未回复 -->
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="replyBtn(scope.row)"
              v-if="scope.row.reply == 1"
              >回复</el-button
            >
            <span v-if="scope.row.reply == 2">已回复</span>
          </template>
        </el-table-column>
        <el-table-column label="查看">
          <template slot-scope="scope">
            <el-button size="mini" @click="detailsBtn(scope.row)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="page"
        :limit.sync="pageSize"
        @pagination="getList"
      />

      <!-- 回复 -->
      <el-dialog
        title="回复"
        :visible.sync="centerDialogVisible"
        width="30%"
        center
      >
        <el-input placeholder="请输入内容" v-model="deal_res">
          <template slot="prepend">回复内容</template>
        </el-input>
        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="replyConfirmationBth"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页
import { feedbackList, feedbackReply } from "@/api/NotificationManagement";

export default {
  components: { Pagination },
  inject: ["reload"],
  data() {
    return {
      tableData: [],
      pickerOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      userValStartDate: "",
      userValEndDate: "",
      userVal: "",
      options: [
        {
          value: "2",
          label: "举报",
        },
        {
          value: "1",
          label: "建议",
        },
      ],
      feedbackTypeVal: "", //反馈类型
      optionsB: [
        {
          value: "1",
          label: "已回复",
        },
        {
          value: "2",
          label: "未回复",
        },
      ],
      replyVal: "", //回复
      total: 0,
      page: 1, //页码
      pageSize: 10, //每页条数
      centerDialogVisible: false,
      id: "",
      deal_res: "",
    };
  },
  methods: {
    //列表
    feedbackList() {
      feedbackList({
        page: this.page,
        pageSize: this.pageSize,
        startDate: "",
        endDate: "",
        type: "", //1.建议 2举报
        reply: "", //1已回复 2未回复
      }).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.list;
          this.total = parseInt(res.data.count);
        }
      });
    },
    //搜索
    feedbackListBtn() {
      if (this.page !== 1) {
        this.page = 1;
      }
      feedbackList({
        page: this.page,
        pageSize: this.pageSize,
        startDate: this.userValStartDate,
        endDate: this.userValEndDate,
        type: this.feedbackTypeVal, //1.建议 2举报
        reply: this.replyVal, //1已回复 2未回复
      }).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.list;
          this.total = parseInt(res.data.count);
        }
      });
    },
    //回复
    replyBtn(row) {
      this.id = row.id;
      this.centerDialogVisible = true;
    },
    replyConfirmationBth() {
      if (this.deal_res !== "") {
        feedbackReply({
          reply: 1,
          id: this.id,
          deal_res: this.deal_res, //回复内容
          reply_img: "",
        }).then((res) => {
          if (res.code == 0) {
            this.$message({
              type: "success",
              message: "回复成功",
            });
            this.reload();
            this.centerDialogVisible = false;
          }
        });
      } else {
        this.$message({
          type: "info",
          message: "回复不能为空",
        });
      }
    },
    getList() {
      feedbackList({
        page: this.page,
        pageSize: this.pageSize,
        startDate: this.userValStartDate,
        endDate: this.userValEndDate,
        type: this.feedbackTypeVal, //1.建议 2举报
        reply: this.replyVal, //1已回复 2未回复
      }).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.list;
          this.total = parseInt(res.data.count);
        }
      });
    },
    //详情
    detailsBtn(row) {
      this.$router.push({
        path: "/NotificationManagement/FeedbackDetails",
        query: {
          id: row.id,
          feedbackType: row.feedbackType,
        },
      });
    },
    //时间
    focus(time) {
      if (!this.userVal) {
        this.userVal = [];
      }
      this.userValStartDate = this.userVal[0];
      this.userValEndDate = this.userVal[1];
    },
  },
  created() {
    this.feedbackList();
  },
};
</script>

<style lang="less" scoped>
.userFeedback {
  margin: 30px;
  height: 100%;
  .box {
    margin-bottom: 20px;
    .el-select {
      margin-right: 20px;
    }
    .el-button {
      margin-left: 20px;
    }
  }
}
</style>